<meta title="添加区代" width="900px"/>
<div class="p">
    <div class="m-b clearfix">
        <form class="form-inline pull-left" id="form" s="form,valid">
            <input autocomplete="off" type="text" class="form-control input-sm" s-valid-error="require()" placeholder="输入手机号查找用户"
                   style="width:200px;" name="phone"/>
            <button type="button" class="btn btn-default btn-sm"
                    s-click="$form.validate().done(function() {$userPanel.refresh()})">查询
            </button>
        </form>
    </div>
    <form id="agentForm" class="form-inline" s="form,valid" method="post" action="/api/districtAgent">
        <div id="userPanel"
             s='datac,check'
             s-check-multiple="false"
             s-data-switch="'off-on'"
             s-data="S.get('/api/user/find-by-phone', $form.node.serialize())">
            <table class="table table-striped table-bordered table-middle">
                <tr>
                    <th style="width: 100px;">手机号：<input autocomplete="off" type="hidden" s-valid-error="require()" s s-data-filter="'user.id'" name="userId"
                                                         id="userId"/></th>
                    <td name="user.phone" s s-data-filter="'user.phone'" style="width: 150px;"></td>
                    <th style="width: 100px;">昵称：</th>
                    <td name="user.nickname" s s-data-filter="'user.nickname'"></td>
                </tr>
                <tr>
                    <th style="width: 100px;">代理周期：</th>
                    <td>
                        <select class="form-control" name="year">
                            <option value="1">1年</option>
                            <option value="-1">永久</option>
                        </select>
                    </td>
                    <th style="width: 100px;">选择城市</th>
                    <td>
                        <div class="form-control s-select pull-left" style="width: 150px;"
                             s="select"
                             id="province"
                             s-data="''"
                             s-valid-error="require()"
                             s-valid-label="省份"
                             s-build="S.get('api/region/list/0')" >
                            <input autocomplete="off" type="hidden" name="province.id" class="s-select-input" />
                            <div class="s-select-mirror">
                                <span></span>
                                <i class="fa fa-caret-down"></i>
                            </div>
                            <div class="s-select-panel">
                                <input autocomplete="off" type="text" class="s-select-filter">
                                <ul class="s-select-list">
                                    <li class="s-select-list-item" value="">选择省份</li>
                                </ul>
                            </div>
                        </div>
                        <div class="form-control s-select pull-left" style="width: 150px;"
                             s="select"
                             id="city"
                             s-data="''"
                             s-build-switch="'off-on'"
                             s-valid-error="require()"
                             s-valid-label="城市"
                             s-select="{title: 'name'}"
                             s-build="S.get('api/region/list/' + ($province.val() || -1))" >
                            <input autocomplete="off" type="hidden" class="s-select-input" name="cityId" />
                            <div class="s-select-mirror">
                                <span></span>
                                <i class="fa fa-caret-down"></i>
                            </div>
                            <div class="s-select-panel">
                                <input autocomplete="off" type="text"  class="s-select-filter">
                                <ul class="s-select-list">
                                    <li class="s-select-list-item" value="">选择城市</li>
                                </ul>
                            </div>
                        </div>
                        <div class="form-control s-select" style="width: 150px;"
                             s="select"
                             id="district"
                             s-data="''"
                             s-build-switch="'off-on'"
                             s-select="{title: 'name'}"
                             s-build="S.get('api/region/list/' + ($city.val() || -1))" >
                            <input autocomplete="off" type="hidden" class="s-select-input" name="districtId" />
                            <div class="s-select-mirror">
                                <span></span>
                                <i class="fa fa-caret-down"></i>
                            </div>
                            <div class="s-select-panel">
                                <input autocomplete="off" type="text"  class="s-select-filter">
                                <ul class="s-select-list">
                                    <li class="s-select-list-item" value="">选择区县</li>
                                </ul>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </form>
</div>
<script type="text/javascript">

    S.meta.btns = [
        {
            name: '确定',
            style: 'btn btn-primary',
            click: function () {
                return $agentForm.submit().done(function () {
                    S.close(true)
                })
            }
        },
        {
            name: '关闭',
            style: 'btn btn-default',
            click: function () {
                S.close()
            }
        }
    ]

    S.on('s-ready', function(){
        S.cascade($province, $city, $district);
    })

</script>